/* eslint-disable react/prop-types */

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import * as Helper from 'Helper';

import Pagination from 'components/Pagination';
import MyWorkList from '../components/MyWorkList';

import * as likesAction from './LikesAction';

@connect(null, buildActionDispatcher)
export default class LikesComponent extends React.Component {
  constructor(props) {
    super(props);
    this.navigateTo = this.navigateTo.bind(this);
    this.state = {
      pageId: 0,
      limit: 20,
    };
  }

  navigateTo(pageId, limit = 20) {
    const { likesAction } = this.props;
    likesAction.getMyLikedWorks(pageId, limit).then((data) => {
      const pageCount = Helper.calculatePageCount(data.totalCount, limit);
      this.setState({
        totalCount: data.totalCount,
        workList: data.assetList,
        pageId,
        limit,
        pageCount,
      });
    });
  }

  componentDidMount() {
    this.navigateTo(0);
  }

  render() {
    return (
      <div id="work-likes">
        {this.state.totalCount >= 0 &&
          <MyWorkList
            title="我的 / 收藏"
            totalCount={this.state.totalCount}
            workList={this.state.workList}
            router={this.props.router}
            location={this.props.location}
            isMine={false}
          />
        }
        {this.state.totalCount > 0 &&
          <Pagination
            currentPageIndex={this.state.pageId}
            pageLimit={this.state.limit}
            totalPagesCount={this.state.pageCount}
            onNavigateTo={this.navigateTo}
          />
        }
        {this.state.totalCount === 0 &&
          <div className="empty">
            <p className="message">您还没有收藏任何作品</p>
            <p>
              <Link to="works/all/featured">
                <button>发现作品</button>
              </Link>
            </p>
          </div>
        }
      </div>
    );
  }
}

function buildActionDispatcher(dispatch) {
  return {
    likesAction: bindActionCreators(likesAction, dispatch),
  };
}
